<template>
    <div class="page-evaluation">
        <div class="main"  v-if="list.length > 0">
            <ShopCommentItem v-for="(comment, index) in list"
                @toImages="toImages(comment)"
                :key="index"
                :is-show-user="userBasicInfo.level"
                :id="comment.id"
                :avatar="comment.avatar"
                :name="comment.nickname"
                :rate="comment.score"
                :content="comment.content"
                :date="comment.created_at"
                :showMore="true"
                :isShow="false"
                :images="comment.image"
                :huifus="comment.child.content"
                :isShowUser="toShowBackBtn"
                @submitContent="submitContent"
                @getDetail="getDetail(comment)" />
            
        </div>
        <div v-if="!req && list.length === 0" class="mall-index__empty">
            暂无数据
        </div>
    </div>
    
</template>

<script lang="ts">
import store from '@/store';
import { api } from '@/lib/api';
import ShopCommentItem from '@/features/comment/shopCommentItem.vue';
import { Component, Vue } from 'vue-property-decorator';
import { EMPTY_LIST, ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'ShopEvaluationList',
    components: {
        ShopCommentItem,
    },
})
export default class ShopEvaluationList extends Vue {
    public get toShowBackBtn(){
        // 用户是商家职员 并且是所属商家 显示回复按钮
        // isShowUser == '3'
        let thisTrue = false;
        if(this.userBasicInfo.level === 3){
            for(let i = 0;i< this.userBasicInfo.shop.length;i++){
                if(parseInt(this.shopId) == this.userBasicInfo.shop[i].id){
                    thisTrue = true;
                    break ;
                }
                
            }
        }
        return thisTrue;
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    /** 套系id */
    public get shopId() {
        return this.$route.params.shopId;
    }

    /** 评价列表 */
    public get shopCommentsMap() {
        return store.state.pkg.shopComments;
    }

    /** 评价列表 */
    public get shopComments() {
        // return EMPTY_LIST;
        return this.shopCommentsMap[Number(this.shopId)] || EMPTY_LIST;
    }

    /** 评价列表 */ 
    public get list() {
        return this.shopComments.list;
    }

    public async getDate() {
        await store.dispatch('pkg/getShopComments', {
            shopId: this.shopId,
            offset: this.list.length,
            count: 10,
        });
    }

    public toImages(comment: Pkg.Comment | Product.Comment) {
        api.push({
            name: ROUTE_NAME.BRIDAL_IMAGES,
            query: {
                comment: JSON.stringify(comment),
            },
        });
    }

    public getDetail(comment:any){
        if(comment.type == '套系'){
            api.push({
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: comment.link_id + '',
                },
            });
        }
        if(comment.type == '商品'){
            api.push({
                name: ROUTE_NAME.PRODUCT_DETAIL,
                params: {
                    productId: comment.link_id + '',
                },
            });
        }
    }

    // 提交评论回复
    public async submitContent(_con,_id){
       store.commit('utils/startRequest');
        const res = await store.dispatch('pkg/ShopCommentsSubmit', {
            pid: _id,
            content:_con
        });
        if (res.statusCode === 200 && res.data.status === 0) {
            // 刷新列表
            await store.dispatch('pkg/getShopComments', {
                shopId: this.shopId,
                offset: 0,
                count: 10,
                forceUpdate:true
            });
            wx.showToast({
                title: '回复成功',
                icon: 'success',
            });
        }
        store.commit('utils/endRequest');
    }

    public async onReachBottom() {
        this.getDate();
    }

    // 下拉刷新
    public async onPullDownRefresh() {
        await store.dispatch('pkg/getShopComments', {
            shopId: this.shopId,
            offset: 0,
            count: 10,
            forceUpdate: true
        });
    }

    public async created() {
        store.commit('utils/startRequest');
        await store.dispatch('pkg/getShopComments', {
            shopId: this.shopId,
            offset: 0,
            count: 10,
        });
        store.commit('utils/endRequest');

        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";
.page-evaluation {
    min-height: 100%;
    background-color: @primary-color;
    .main {
        padding: 10px;
    }
}

</style>
